
import './rang.scss'
export default  defineComponent({
  name: 'Range',
  props: {
   start:{
    type:String,
    default:''

   },
   end:{
    type:String,
    default:''
   }  
  },
  emits:{
    'update:start':(start:string)=> typeof start == 'string',

    'update:end':(end:string)=>typeof end == 'string'
  },
  setup(props,{emit}){
    const start=computed({
      get(){
        return props.start
      },
      set(newVal:string){
        emit('update:start',newVal)

      }
    })
    const end=computed({
      get(){
        return props.end
      },
      set(newVal:string){
        emit('update:end',newVal)

      }
    })
    return ()=>{
      return <div class={'range'} >
        <input v-model={start.value}   ></input>
        <span> - </span>
        <input v-model={end.value}  ></input>
      </div>
    }
  }

})